<script setup lang="ts">
import { ref } from 'vue'
import { Card, Cond, CondItem, DateRangePicker, Enum, Input, Space, Table, TableColumn } from '@idmy/ui'
import { Api } from '@idmy/core'
import { page } from './services'

const input = ref({
  sorts: ['createdAt', 'desc'],
  params: {
    account: undefined,
    status: undefined,
    os: undefined,
    platform: undefined,
    browser: undefined,
    ipv4: undefined,
    createdAts: [],
  },
})
</script>

<template>
  <Card>
    <Api ref="apiRef" :load="page" v-model:input="input" browser>
      <Space direction="vertical">
        <Cond>
          <CondItem title="账号" field="account">
            <Input v-model="input.params.account" placeholder="登录账号" />
          </CondItem>
          <CondItem title="登录状态" field="status">
            <Enum clazz="LoginStatus" v-model="input.params.status" />
          </CondItem>
          <CondItem title="操作系统" field="os">
            <Input v-model="input.params.os" />
          </CondItem>
          <CondItem title="浏览器" field="browser">
            <Input v-model="input.params.browser" />
          </CondItem>
          <CondItem title="IP地址" field="ipV4">
            <Input v-model="input.params.ipV4" />
          </CondItem>
          <CondItem title="登录时间" field="createdAts">
            <DateRangePicker v-model="input.params.createdAts" />
          </CondItem>
          <template #op></template>
        </Cond>
        <Table>
          <TableColumn title="ID" field="id" :width="70" />
          <TableColumn title="用户ID" field="userId" :width="70" />
          <TableColumn title="账号" field="account" :width="100" />
          <TableColumn title="日志状态" field="status" format="Enum" params="LoginStatus" :width="110" />
          <TableColumn title="操作系统" field="os" :width="150" ellipsis tooltip />
          <TableColumn title="浏览器" field="browser" :width="140" />
          <TableColumn title="设备信息" field="deviceInfo" ellipsis tooltip align="left" />
          <TableColumn title="IPv4" field="ipv4" :width="120" />
          <TableColumn title="登录时间" field="createdAt" type="DateTime" :width="150" sortable />
        </Table>
      </Space>
    </Api>
  </Card>
</template>
